<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09_Vue实例_生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="test">
  <button @click="destoryVm">destory vm</button>
  <p v-if="isShow">中移在线服务公司</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: "#test",
    data: {
      isShow: true
    },
    //1、初始化阶段
    beforeCreate() {
      console.log("beforeCreate()");
    },

    create() {
      console.log("create()");
    },

    beforeMount() {
      console.log("beforeMount()");
    },

    mounted(){//初始化执行
      console.log("mounted()");
      this.intervalId=setInterval(() => {
        console.log("---------------");
        this.isShow = !this.isShow;
      },1000);
    },
    //2、更新阶段
    beforeUpdate() {
      console.log("beforeUpdate()");
    },

    updated() {
      console.log("updated()");
    },

    beforeDestroy() {
      console.log("beforeDestroy()");
      clearInterval(this.intervalId);
    },
    destroyed(){
      console.log("destroyed()");
    },
    methods: {
      destoryVm(){
        this.$destroy();
      }
    }
  });

</script>
</body>
</html>